<template>
  <view class="page-bank">
    <view class="header">
      <view class="title">{{ $t('mine.银行卡') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <view class="content">
      <view class="txt" @click="handleAddBank">{{ $t('mine.添加收款信息') }}</view>
      <view class="list-card" v-for="(v, i) in bankList" :key="i">
        <!-- <view class="bank-item">
          <view class="label">开户行</view>
          <view class="value">{{ v.bankNameSub }}</view>
        </view> -->
        <view class="bank-item column">
          <view class="label" v-if="v.bankType == 1">{{ $t('mine.银行卡') }}</view>
          <view class="label" v-else-if="v.bankType == 2">{{ $t('mine.USDT') }}</view>
          <view class="value">{{ v.bankCode | filterPrivacy }}</view>
        </view>
        <view class="bank-footer">
          <view class="label">{{ v.name }}</view>
          <view class="value" v-if="v.bankType == 1">{{ v.bankName }}</view>
          <view class="value" v-else-if="v.bankType == 2">{{ $t('mine.USDT') }}</view>
        </view>
      </view>
      <view class="desc">{{ $t('mine.重新绑定银行卡，请联系客服处理显示') }}</view>
    </view>
  </view>
</template>
<script>
  import { userbank } from '@/api/wallet.js'

  export default {
    data() {
      return {
        bankList: []
      }
    },
    onPullDownRefresh() {
      this.getBankList()
      uni.stopPullDownRefresh()
    },
    methods: {
      // 返回上一页
      handleBack() {
        // uni.navigateBack()
        this.$tab.navigateTo('/pages/mine/wallet/index')
      },
      //拉取数据
      getBankList() {
        this.$modal.loading('loading', 'loading')
        userbank()
          .then((res) => {
            this.$modal.closeLoading()
            let { bankList } = res.result
            this.bankList = bankList
          })
          .catch((err) => {
            this.$modal.closeLoading()
          })
      },
      // 添加银行卡
      handleAddBank() {
        uni.navigateTo({
          url: '/pages/mine/wallet/bankEdit'
        })
      }
    },
    created() {
      this.getBankList()
    },
    filters: {
      filterPrivacy(val) {
        function maskString(str, options = {}) {
          if (!str) return ''
          const {
            preserveStart = 4, // 保留开头的字符数
            preserveEnd = 4, // 保留结尾的字符数
            maskChar = '*', // 掩码字符
            maskLength = null, // 自定义掩码长度（可选）
            blockSize = 4, // 分组大小
            separator = '' // 分组分隔符
          } = options
          // 清除所有分隔符（如果需要保留原始分隔符位置，可注释此行）
          const cleanStr = str.replace(/\s/g, '')
          const length = cleanStr.length
          // 处理长度不足的情况
          if (length <= preserveStart + preserveEnd) {
            return cleanStr
          }
          // 计算掩码部分长度
          const maskedLen = maskLength !== null ? Math.min(maskLength, length - preserveStart - preserveEnd) : length - preserveStart - preserveEnd
          // 生成掩码字符串
          const maskedPart = maskChar.repeat(maskedLen)
          // 截取前后保留部分
          const startPart = cleanStr.slice(0, preserveStart)
          const endPart = cleanStr.slice(-preserveEnd)
          // 组合结果
          let result = startPart + maskedPart + endPart
          // 格式化（每blockSize个字符添加一个分隔符）
          if (blockSize > 0 && separator) {
            result = result.match(new RegExp(`.{1,${blockSize}}`, 'g')).join(separator)
          }
          return result
        }
        return maskString(val)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .page-bank {
    position: relative;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .content {
      margin: 50px 10px 10px;
      .txt {
        color: #02c289;
        padding: 10px 0;
        text-align: right;
        font-size: 24rpx;
      }
      .list-card {
        background-color: #fff;
        border-radius: 6px;
        background: linear-gradient(135deg, #d7d7d7, #f3f3f3 48%, #b9b9b9);
        margin-bottom: 16px;
        padding: 16px;
        font-size: 26rpx;
        .bank-item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          &.column {
            flex-direction: column;
            align-items: flex-start;
            .value {
              margin-top: 10px;
              color: rgb(153, 153, 153);
              font-size: 28rpx;
            }
          }
        }
        .bank-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 25px;
          color: #00a9a9;
        }
      }
      .desc {
        padding: 20rpx;
        color: rgb(225, 116, 61);
        text-align: center;
      }
    }
  }
</style>
